<template>
  
		<!-- 切换窗口 -->
		<view ref="toggleBarRef" class="block_10" style="box-sizing: border-box;">
      <scroll-view
        style="width: 100%; display: flex; flex-direction: row; flex-wrap: nowrap;"
        class="option-list d-s-c d-r column__3 scroll-view_H"
        scroll-x="true"
      >
        <view
          class="option-item scroll-view-item_H"
          :class="{ 'active_option__item': activeOption === index }" 
          v-for="(item, index) in options"
          @click="toggleBarHandle(index)" 
          :key="index"
        >
          <view class="text_top">{{ item.title }}</view>
          <view class="text_bottom">{{ item.child }}</view>
        </view>
      </scroll-view>
    </view>
    
</template>
<style>
  
</style>
<script>
  export default {
    data() {
      return {
				activeOption: 0,
				options: [
				  { title: "口碑推荐",  child: "为你推荐" },
				  { title: "爆款",      child: "电脑平板" },
				  { title: "畅玩",      child: "游戏电玩" },
				  { title: "旅行",      child: "摄影航拍" },
				]
      }
    },
		methods: {
			toggleBarHandle(index) {
				const self = this;
				console.log(self.$refs.toggleBarRef)
				self.activeOption = index;
				self._get(
					"/product.category/get_category_list", {},
					function(data) {
						self.$emit('queryGroup', data.data.category_id[index]);
					}
				);
			}
		}
  }
</script>
<style scoped>
	.block_10 {
	  margin: 20rpx 0;
	  box-sizing: border-box;
	  width: 100%;
	  height: 100rpx;
	  flex-direction: row;
	  display: flex;
	}
	.option-item {
	  width: 25%;
	  height: 120rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	}
	.option-item + .option-item::before {
	  position: absolute;
	  height: 50%;
	  width: 1rpx;
	  background-color: #e6e6e6;
	  content: "";
	  left: 0;
	  top: 50%;
	  transform: translateY(-50%);
	}
	.active_option__item .text_top {
  	font-weight: bold;
  	font-size: 30rpx;
	}
	.text_bottom {
	  overflow-wrap: break-word;
	  color: rgba(123, 124, 125, 1);
	  font-size: 20rpx;
	  font-family: PingFangSC-Regular;
	  font-weight: normal;
	  text-align: center;
	  white-space: nowrap;
	  line-height: 20rpx;
	  margin-top: 10rpx;
	}
	.active_option__item .text_bottom {
	  background-color: rgba(0, 200, 190, 1);
	  color: #ffffff;
	  border-radius: 16rpx;
	  line-height: 32rpx;
	  height: 32rpx;
	  width: 100rpx;
	}
</style>